<script setup lang="ts">

import {computed, ref} from "vue";
import type {CinemaSeat, MovieCinemaType} from "@/interfaces/movie-cinema";
import MovieIcon from "@/components/movie-icon/MovieIcon.vue";
import {createCinemaSeats} from "@/utils";
import type {MovieSession} from "@/interfaces/movie-session";
import {onLoad} from "@dcloudio/uni-app";
import {useGetSessionDetailApi} from "@/services/api";
import type {GetByIdReqVo} from "@/interfaces/base";
import {useStore} from "vuex";
import {MovieDetailReqVO} from "@/interfaces/movie";

const store = useStore()
const uToastRef = ref()
const selectedSeats = ref<number[][]>([])
const ticketCount = ref<number>(0)
const movieDetailReq = ref<MovieDetailReqVO>({
  id:0
})
const seatType = ref([
  {
    status: 0,
    icon: 'seat',
    customStyle: {
      backgroundColor: "#9AC1F0"
    },
    type: "可选"
  },
  {
    status: 1,
    icon: 'seat-fill',
    customStyle: {
      backgroundColor: "#A0E548"
    },
    type: "已选"
  },
  {
    status: 2,
    icon: 'seat-fill',
    customStyle: {
      backgroundColor: "#E45F2B"
    },
    type: "已售"
  },
])
const showOtherSession = ref<boolean>(false)
const otherSession = ref<MovieSession[]>([
  {
    id: 1,
    startTime: "13:20",
    endTime: "15:19",
    format: "国语2D",
    cinema: "4号厅",
    price: 33.8
  },
  {
    id: 2,
    startTime: "14:00",
    endTime: "15:59",
    format: "国语2D",
    cinema: "2号厅",
    price: 33.8
  },
  {
    id: 3,
    startTime: "14:50",
    endTime: "16:49",
    format: "国语2D",
    cinema: "1号厅",
    price: 33.8
  }
])
const movieSessionDetail = ref<MovieCinemaType>({
  endTime: "",
  format: "",
  id: 0,
  movieName: "",
  name: "",
  price: 0,
  seatColumn: 0,
  seatRow: 0,
  seatTotal: 0,
  soldMovieSeat: [],
  startTime: ""
})
const cinema = ref<CinemaSeat[][]>([])
const handleChoose = (seat: CinemaSeat, row: number, column: number, uToastRef: any): void => {
  if (seat.status === 0) {
    if (selectedSeats.value.length == 4) {
      uToastRef.show({
        type: 'default',
        message: "一次最多买4张票",
      })
      return
    }
    cinema.value[row][column] = {
      status: 1,
      icon: 'seat-fill',
      customStyle: {
        backgroundColor: "#A0E548"
      }
    }
  } else if (seat.status === 1) {
    cinema.value[row][column] = {
      status: 0,
      icon: 'seat',
      customStyle: {
        backgroundColor: "#9AC1F0"
      }
    }
  }
  selectedSeats.value = []
  ticketCount.value = 0
  cinema.value.forEach((v1, i1) => {
    v1.forEach((v2, i2) => {
      if (v2.status == 1) {
        selectedSeats.value.push([i1, i2])
        ++ticketCount.value
      }
    })
  })
}
const cancelChoose = (row: number, column: number): void => {
  cinema.value[row][column] = {
    status: 0,
    icon: 'seat',
    customStyle: {
      backgroundColor: "#9AC1F0"
    }
  }
  selectedSeats.value = []
  ticketCount.value = 0
  cinema.value.forEach((v1, i1) => {
    v1.forEach((v2, i2) => {
      if (v2.status == 1) {
        selectedSeats.value.push([i1, i2])
        ++ticketCount.value
      }
    })
  })
}
const totalPrice = computed(() => {
  if (selectedSeats.value.length > 0) return (movieSessionDetail.value.price * 10 * selectedSeats.value.length) / 10
  else return ''
})
const handleSubmit = (): void => {
  selectedSeats.value = []
  ticketCount.value = 0
  cinema.value.forEach((v1, i1) => {
    v1.forEach((v2, i2) => {
      if (v2.status == 1) {
        selectedSeats.value.push([i1, i2])
        ++ticketCount.value
      }
    })
  })
  if(store.getters["auth/getToken"]){
    uni.navigateTo({
      url: "/pages/movie/create-order?data=" + JSON.stringify({
        getByIdReqVo:getByIdReqVo.value,
        movieDetailReq:movieDetailReq.value,
        selectedSeats: selectedSeats.value,
        ticketCount: ticketCount.value,
        totalPrice: totalPrice.value,
      })
    })
  }else{
    uni.navigateTo({
      url: "/pages/login/index"
    })
  }
}
const getByIdReqVo = ref<GetByIdReqVo>({
  id: 0
})
const timePeriod = computed(() => {
  const sDateTime = movieSessionDetail.value.startTime.split(" ")
  const sDate = sDateTime[0].split("-")
  const sTime = sDateTime[1].split(":")
  const eDateTime = movieSessionDetail.value.endTime.split(" ")
  const eTime = eDateTime[1].split(":")
  return sDate[1] + "月" + sDate[2] + "日 " + sTime[0] + ":" + sTime[1] + "-" + eTime[0] + ":" + eTime[1]
})
const init = async () => {
  const {data: res} = await useGetSessionDetailApi(getByIdReqVo.value)
  movieSessionDetail.value = res
  cinema.value = createCinemaSeats(movieSessionDetail.value.seatRow, movieSessionDetail.value.seatColumn, movieSessionDetail.value.soldMovieSeat)
}
onLoad(({id,movieId}) => {
  getByIdReqVo.value.id = id
  movieDetailReq.value.id = movieId
  init()
})
</script>

<template>
  <view class="container">
    <u-toast ref="uToastRef"></u-toast>
    <view class="cinema-window iconfont icon-xuanzhongbiaoqian_fuzhi"></view>
    <view class="movie-cinema">
      {{ movieSessionDetail.name }}
    </view>
    <view class="cinema-content">
      <view class="cinema-row" v-for="(row,rowIndex) in cinema" :key="rowIndex">
        <view class="cinema-column" v-for="(column,columnIndex) in row" :key="columnIndex"
              @click="handleChoose(column,rowIndex,columnIndex,uToastRef)">
          <movie-icon
              :icon="column.icon"
              :size="'40px'"
              :customStyle="column.customStyle"/>
        </view>
      </view>
    </view>
    <view class="bottom">
      <view class="seat-type-list" v-if="selectedSeats.length === 0">
        <view class="seat-type" v-for="(seat,index) in seatType" :key="index">
          <movie-icon
              :icon="seat.icon"
              :size="'32px'"
              :customStyle="seat.customStyle"/>
          <view class="seat-type-name">
            {{ seat.type }}
          </view>
        </view>
      </view>
      <view class="session-info">
        <view class="first-row">
          <view class="movie-name">
            {{ movieSessionDetail.movieName }}
          </view>
          <view class="change-session" @tap="showOtherSession = !showOtherSession">
            切换场次
          </view>
        </view>
        <view class="session-time">
          {{ timePeriod }} {{ movieSessionDetail.format }}
        </view>
        <view class="other-session-list" v-if="showOtherSession">
          <view class="other-session" v-for="(session,index) in otherSession" :key="index">
            <view class="start-time">
              {{ session.startTime }}
            </view>
            <view class="format">
              {{ session.format }}
            </view>
            <view class="price">
              ￥{{ session.price }}
            </view>
          </view>
        </view>
        <u-divider v-if="selectedSeats.length > 0"></u-divider>
        <view class="choose-seat-list">
          <view class="choose-seat" v-for="(seat,index) in selectedSeats" :key="index">
            <view class="left">
              <view class="seat-location">
                {{ (seat[0] + 1) + '排' + (seat[1] + 1) + '座' }}
              </view>
              <view class="ticket-price">
                ￥{{ movieSessionDetail.price }}
              </view>
            </view>
            <view class="right">
              <u-icon name="close" size="24" @tap="cancelChoose(seat[0],seat[1])"></u-icon>
            </view>
          </view>
        </view>
      </view>
      <view class="submit-button">
        <up-button
            type="error"
            shape="circle"
            @click="handleSubmit"
            :disabled="!totalPrice"
        >
          <text class="total-price">￥{{ totalPrice }}</text>
          购票
        </up-button>
      </view>
    </view>
  </view>
</template>

<style scoped>

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #45496A;
  height: 100vh;
}

.cinema-window {
  font-size: 100rpx;
  color: #9DBDBA;
}

.movie-cinema {
  font-size: 32rpx;
  color: #ffffff;
  margin-bottom: 48rpx;
}

.cinema-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.cinema-row {
  display: flex;
  flex-direction: row;
  gap: 10rpx;
}

.cinema-column {
  display: flex;
}

.bottom {
  position: fixed;
  bottom: 0;
  width: 100vw;
}

.seat-type-list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 48rpx;
}

.seat-type {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.seat-type-name {
  font-size: 32rpx;
  color: #ffffff;
}

.submit-button {
  display: flex;
  flex-direction: row;
  padding: 36rpx;
  justify-content: center;
  align-items: center;
}

.session-info {
  background-color: #7D8BAE;
  margin: 36rpx;
  display: flex;
  padding: 30rpx;
  flex-direction: column;
  border-radius: 24rpx;
}

.first-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 16rpx;
}

.movie-name {
  font-size: 36rpx;
  color: #ffffff;
}

.change-session {
  font-size: 30rpx;
  color: #F1B2B2;
}

.session-time {
  font-size: 28rpx;
  color: #E8CCC7;
}

.other-session-list, .choose-seat-list {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 32rpx;

}

.other-session-list {
  padding-top: 16rpx;
}

.other-session {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid #D31638;
  background-color: #F3B7AD;
  padding: 12rpx;
  border-radius: 8rpx;
}

.other-session .start-time {
  font-size: 26rpx;
}

.other-session .format {
  font-size: 24rpx;
  color: #555555;
}

.other-session .price {
  font-size: 22rpx;
}

.choose-seat {
  display: flex;
  flex-direction: row;
  padding: 16rpx;
  gap: 12rpx;
  background-color: #cccccc;
  border-radius: 8rpx;
}

.left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.seat-location {
  font-size: 18rpx;
}

.ticket-price {
  font-size: 16rpx;
}

.right {
  display: flex;
  justify-content: center;
  align-items: center;
}

.total-price {
  margin-right: 24rpx;
}
</style>